<template>
    <div class="shop-info">
        <div class="shop-top">
            <img :src="shop.logo" alt="">
            <span class="shop-title">{{shop.name}}</span>
        </div>
        <div class="shop-middle">
            <div class="shop-middle-item shop-middle-left">
                <div class="info-sells">
                    <div class="sells-count">
                        {{shop.sells}}
                    </div>
                    <div class="sells-text">总销售</div>
                </div>
                <div class="info-goods">
                    <div class="goods-count">
                        {{shop.goodsCount}}
                    </div>
                    <div class="goods-text">全部宝贝</div>
                </div>
            </div>
            <div class="shop-middle-item shop-middle-right">
             <table>
                 <tr v-for="(item,index) in shop.score" :key="index">
                    <td>{{item.name}}</td>
                    <td class="score" :class="[item.isBetter?'active1':'active2']">{{item.score}}</td>
                    <td class="better" :class="[item.isBetter?'isMore1':'isMore2']">{{item.isBetter?'高':'低'}}</td>
                </tr>
            </table>   
            </div>
        </div>
        <div class="shop-bottom">
            <div class="enter-shop">进店逛逛</div>
        </div>

        
    </div>
</template>

<script>
export default {
    props:{
        shop:{
            type:Object
        }
    },
    created(){
        console.log(this.shop.Score);
    }
};
</script>

<style lang="less" scoped>
.shop-info{
    .shop-top{
        img{
            position: relative;
            top: 20px;
            margin-left: 10px;
            height: 50px;
            width: 50px;
            border-radius: 25px;
        }
        span{
            margin-left: 10px;
        }

    }
    .shop-middle{
        display: flex;
        margin-top: 50px;
        .shop-middle-left{
            font-size: 14px;
            display: flex;
            padding-right: 25px;
            border-right: 1px solid #cccccc;
            // border-right: 2px solid #cccccc;
            .info-sells{
                padding-left: 15px;
                padding-right: 15px;
                .sells-count{

                }
                .sells-text{
                    margin-top: 10px;
                }

            }
            .info-goods{
                text-align: center;
                .goods-count{

                }
                .goods-text{
                    margin-top: 10px;
                }
            }

        }
        .shop-middle-right{
            font-size: 14px;
            margin-left: 40px;
        }
        
       

    }
    .shop-bottom{
        text-align: center;
        margin-top: 20px;
    }

}
.active1{
    color: red;
}
.active2{
    color: green;
}
.isMore1{
    background: red;

}
.isMore2{
    background:green;

}
.better{
    color: honeydew;
}

</style>

